<template>
  <div id="old_age_service">
    <van-nav-bar title="养老服务" left-arrow @click-left="onClickLeft" fixed />
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <img v-lazy="item.imageUrl" v-if="item.imageUrl"/>
          <!-- <img v-lazy="defultBanner" v-if="!item.imageUrl"> -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="service-details">
      <van-grid v-if=" role== 'admin'">
        <van-grid-item v-for="item in serviceList" :key="item.name" :to="item.path">
          <svg-icon :icon-class="item.icon" widthW="1.2rem" heightH="1.2rem"></svg-icon>
          <span class="server-text">{{item.name}}</span>
        </van-grid-item>
      </van-grid>
      <van-grid :column-num="this.num" v-if=" role== 'user'">
        <van-grid-item v-for="item in userServiceList" :key="item.name" :to="item.path">
          <svg-icon :icon-class="item.icon" widthW="1.2rem" heightH="1.2rem"></svg-icon>
          <span class="server-text">{{item.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="oldAgeNews">
      <div class="news-head">
        <span class="left-text">养老资讯</span>
        <span class="more-news" @click="moreNewsClick">更多</span>
      </div>
      <!-- <div style="clear:both"></div> -->
      <van-list v-model="loading" :finished="finished" @load="onLoad" class="news-content">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
          <van-cell v-for="item in newsList" :key="item.id" @click="goToDetails(item.id)">
            <div>
              <div style="vertical-align:top;display:inline-block" class="text-style">
                <p class="title">{{item.subject}}</p>
                <p class="date">{{item.creationDate}}</p>
              </div>
              <div v-if="item.headImage" style="display:inline-block">
                <!-- <van-image :src="item.headImage"/> -->
                <img v-lazy="item.headImage" :key="item.headImage" />
              </div>      
            </div>
          </van-cell>
        </van-pull-refresh>
      </van-list>
    </div>
    <van-popup v-model="showLoading">
      <van-loading color="#DC4630" />
    </van-popup>
  </div>
</template>

<script>
import api from "@/controller/agedService.js";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      finished: false,
      loading: false,
      isLoading: false,
      role: "user",
      num: 2,
      curPage: 1,
      pageSize: 5,
      size: 1,
      images: [],
      showLoading: false,
      serviceList: [
        {
          name: "巡查服务",
          icon: "巡查服务",
          path: "/work/searchService"
        },
        {
          name: "老人档案",
          icon: "老人档案",
          path: "/work/oldAgeFiles"
        },
        {
          name: "住养服务",
          icon: "住养服务",
          path: "/work/liveNursingService"
        },
        {
          name: "品质服务",
          icon: "品质服务",
          path: "/work/qualityService"
        }
      ],
      userServiceList: [
        {
          name: "住养服务",
          icon: "住养服务",
          path: "/work/liveNursingService"
        },
        {
          name: "品质服务",
          icon: "品质服务",
          path: "/work/qualityService"
        }
      ],
      newsList: [],
      getFlag: true,
      jurisdiction: {},
      defultBanner: require("@/icons/img/banner.png"),
    };
  },
  mounted() {
    this.getSwipper();
    // 判断用户权限
    this.jurisdiction = JSON.parse(localStorage.getItem("userInfo"))
    this.jurisdiction.permissions.forEach(item =>{
      if(item.indexOf('养老服务$pensionCare$searchInfoFront') !== -1) {
        this.role = "admin"
      }
    })
  },
  methods: {
    getInfo() {
      const data = {
        curPage: this.curPage,
        pageSize: this.pageSize
      };
      api
        .pensionInformation_v1_list_frontEnd(data)
        .then(res => {
          if(res.datas.records.length>0) {
            this.newsList = []
            for(var i =0; i<res.datas.records.length; i++) {
              if(i<5) {
                 this.newsList.push(res.datas.records[i])
              }
            }
            this.$nextTick(() => {
              this.finished = true;
              this.isLoading = false;
              this.loading = false;
            })
          }else {
            this.finished = true;
            this.isLoading = false;
            this.loading = false;
            // this.$toast("暂无数据");
          }
        })
        .catch(() => {
          this.$toast(constant.netErrMsg);
        })
    },
    getSwipper() {
      this.showLoading = true
      const data = {
        curPage: 0,
        pageSize: 10
      };
      api
        .pensionBanner_v1_list_frontEnd(data)
        .then(res => {
          this.images = res.datas.records;
        })
        .catch(() => {
          this.$toast(constant.netErrMsg);
        })
        .then(() => {
          this.showLoading = false
        })
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goToDetails(val) {
      this.$router.push({ path: "/work/oldNewsDetails", query: { id: val } });
    },
    moreNewsClick() {
      this.$router.push({ path: "/work/oldNewsMore" });
    },
    onRefresh() {
      setTimeout(() => {
        this.onLoad()
      }, 500)
    },
    onLoad() {
      this.getInfo()
    }
  }
};
</script>
<style lang="scss">
#old_age_service {
  .swiper {
    height: 160px;
    width: 375px;
    .van-swipe__indicator--active {
      background: #dc4630 !important;
    }
    img {
      width: 100%;
      height: 160px;
      opacity: 1;
    }
  }
  .service-details {
    .van-grid-item {
      width: 91.5px;
      height: 105px;
      border: none;
    }
    .server-text {
      margin-top: 5px;
      font-family: PingFang-SC-Medium;
      font-size: 14px;
      color: #666666;
      letter-spacing: 0;
      text-align: center;
      line-height: 20px;
    }
  }
  .oldAgeNews {
    background: white;
    height: calc(100vh - 320px);
    margin-top: 10px;
    .news-head {
      display: block;
      clear: both;
      overflow: hidden;
      border-bottom: 0.5px solid #e2e2e2;
      .left-text {
        float: left;
        font-weight: bolder;
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        color: #333333;
        letter-spacing: 0;
        line-height: 25px;
        padding: 15px 0 9.5px 10px;
      }
      .more-news {
        float: right;
        margin-right: 15px;
        margin-top: 17.5px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        line-height: 20px;
      }
    }
  }
  .van-list {
    min-height: calc(100vh - 375px);
  }
  .van-cell {
    padding: 15px 0;
    box-sizing: inherit;
    width: 345px;
    margin: 0 auto;
    border-bottom: 0.5px solid #e2e2e2;
    line-height: 0;
    img {
      width: 100px;
      height: 80px;
      margin-left: 21px;
      opacity: 1;
    }
    .text-style {
      width: 224px;
      line-height: 24px;
      .title {
        height: 48px;
        font-family: PingFang-SC-Medium;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        line-height: 24px;
        overflow: hidden;
        width: 224px;
      }
      .date {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0;
        margin-top: 13px;
        line-height: 16.5px;
      }
    }
  }
  .van-grid-item__content::after {
    border: none !important;
  }
  .van-cell:not(:last-child)::after {
    border: none !important;
  }
}
</style>